<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>原神 - 探索提瓦特大陆的奇幻冒险</title>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Noto Sans SC', sans-serif;
            background: #f5f5f5;
            color: #333;
        }

        .hero {
            height: 100vh;
            background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
                        url('https://genshin.hoyoverse.com/_nuxt/img/2.8.0_1.0c0c0c.jpg');
            background-size: cover;
            background-position: center;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            color: white;
        }

        .hero-content {
            max-width: 800px;
            padding: 20px;
        }

        .hero h1 {
            font-size: 4em;
            margin-bottom: 20px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
        }

        .hero p {
            font-size: 1.5em;
            margin-bottom: 30px;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
        }

        .cta-button {
            display: inline-block;
            padding: 15px 30px;
            background: #4a90e2;
            color: white;
            text-decoration: none;
            border-radius: 5px;
            font-size: 1.2em;
            transition: background 0.3s ease;
        }

        .cta-button:hover {
            background: #357abd;
        }

        .features {
            padding: 80px 20px;
            background: white;
        }

        .features-grid {
            max-width: 1200px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
        }

        .feature-card {
            padding: 30px;
            background: #f8f9fa;
            border-radius: 10px;
            text-align: center;
            transition: transform 0.3s ease;
        }

        .feature-card:hover {
            transform: translateY(-5px);
        }

        .feature-card h3 {
            margin: 20px 0;
            color: #2c3e50;
        }

        .feature-card p {
            color: #666;
            line-height: 1.6;
        }

        .characters {
            padding: 80px 20px;
            background: #f0f2f5;
        }

        .characters-grid {
            max-width: 1200px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
        }

        .character-card {
            background: white;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        .character-card img {
            width: 100%;
            height: 300px;
            object-fit: cover;
        }

        .character-info {
            padding: 20px;
        }

        .character-info h3 {
            margin-bottom: 10px;
            color: #2c3e50;
        }

        .character-info p {
            color: #666;
            font-size: 0.9em;
        }

        footer {
            background: #2c3e50;
            color: white;
            text-align: center;
            padding: 20px;
        }
    </style>
</head>
<body>
    <section class="hero">
        <div class="hero-content">
            <h1>原神</h1>
            <p>探索提瓦特大陆，开启你的奇幻冒险之旅</p>
            <a href="#" class="cta-button">立即下载</a>
        </div>
    </section>

    <section class="features">
        <div class="features-grid">
            <div class="feature-card">
                <h3>开放世界</h3>
                <p>自由探索广阔的提瓦特大陆，发现隐藏的秘密和宝藏</p>
            </div>
            <div class="feature-card">
                <h3>元素战斗</h3>
                <p>利用七种元素之力，创造独特的战斗体验</p>
            </div>
            <div class="feature-card">
                <h3>角色收集</h3>
                <p>收集并培养你喜爱的角色，组建最强队伍</p>
            </div>
        </div>
    </section>

    <section class="characters">
        <div class="characters-grid">
            <div class="character-card">
                <img src="https://genshin.hoyoverse.com/_nuxt/img/2.8.0_2.0c0c0c.jpg" alt="温迪">
                <div class="character-info">
                    <h3>温迪</h3>
                    <p>蒙德城的吟游诗人，风神巴巴托斯的人间体</p>
                </div>
            </div>
            <div class="character-card">
                <img src="https://genshin.hoyoverse.com/_nuxt/img/2.8.0_3.0c0c0c.jpg" alt="钟离">
                <div class="character-info">
                    <h3>钟离</h3>
                    <p>璃月港的神秘客卿，岩神摩拉克斯的化身</p>
                </div>
            </div>
            <div class="character-card">
                <img src="https://genshin.hoyoverse.com/_nuxt/img/2.8.0_4.0c0c0c.jpg" alt="雷电将军">
                <div class="character-info">
                    <h3>雷电将军</h3>
                    <p>稻妻的雷影，追求永恒的雷神</p>
                </div>
            </div>
        </div>
    </section>

    <footer>
        <p>© 2024 原神 - 米哈游版权所有</p>
    </footer>
</body>
</html>